<!--月度公司层面环保安全会议及开展检查情况 companySafeEnStatusSafeRpt-->
<template>
	<Layout>

		<Form ref="form1" :model="dataToQuery" :label-width="120">
			<Row v-show="!switchFlag" class="query-form">
				<Col span="8">
				<FormItem label="企业名称：" prop="order">
					<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true"
					 :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem label="月份：" prop="month">
					<DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end"
					 placeholder="请选择月份" style="width: 41%" @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker>
					-
					<DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end"
					 placeholder="请选择月份" style="width: 41%" @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
				</FormItem>
				</Col>
				<Col span="8">
				<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
				<Button @click="reset" class="ivu-btn-reset">重置</Button>
				<Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
			<Row v-show="switchFlag" class="query-form">
				<Col span="8">
				<FormItem label="企业名称：" prop="order">
					<cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyName' :orgTree="true"
					 :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem label="月份：" prop="month">
					<DatePicker class="query-form-el" v-model="dataToQuery.monthStart" format="yyyy-MM" type="month" placement="bottom-end"
					 placeholder="请选择月份" style="width: 41%" @on-change="(date) => { dataToQuery.monthFrom = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthEnd && date.valueOf() > dataToQuery.monthEnd;}}"></DatePicker>
					-
					<DatePicker class="query-form-el" v-model="dataToQuery.monthEnd" format="yyyy-MM" type="month" placement="bottom-end"
					 placeholder="请选择月份" style="width: 41%" @on-change="(date) => { dataToQuery.monthTo = date + '-01'}" :options="{disabledDate(date) {return date && dataToQuery.monthStart && date.valueOf() < dataToQuery.monthStart;}}"></DatePicker>
				</FormItem>
				</Col>
				<Col span="8">
				<FormItem label="年度：" prop="yearDate">
					<DatePicker class="query-form-el" v-model="dataToQuery.yearDate" type="year"></DatePicker>
				</FormItem>
				</Col>
			</Row>
			<Row v-show="switchFlag" class="query-form">
				<Col span="8" offset="16">
				<Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
				<Button @click="reset" class="ivu-btn-reset">重置</Button>
				<Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
			<Row class="query-form">
				<Col span="24">
				<!--<Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>-->
				<Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button>
				</Col>
			</Row>
		</Form>
		<Table ref='table' :height="tableHeight" :row-class-name="rowClassName" no-data-text="没有查询到相关数据!"
		 @on-selection-change='getSelectRows' border :columns="columns1" :data="dataTable" :loading='pageStatus.loading || pageStatus.baseLoading'>
		</Table>
		<Row style="margin-right:10px;">
			<Col span="24">
			<Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
			 @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
			</Col>
		</Row>
		<Modal title="月度公司层面环保安全会议及开展检查情况" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800
		 :styles="{height:'810px'}" class-name='limit-height-dialog'>
			<Row>
				<Col span="24">
				<Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView"
				 :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?250:null" :label-position="mode === 'view'?'right':'top'">
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label='企业名称：' prop='companyId'>
							<div v-if="mode === 'view'">{{dataToView.companyName}}</div>
							<cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true"
							 :currentOrgId="dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}"></cascader-dom>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='所在地：' prop='companyAddress'>
							<div v-if="mode === 'view'">{{areaCodeToAreaName(dataToView.companyAddress)}}</div>
							<Cascader v-else :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select :transfer="true"
									  :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')"  :clearable='false'
									  @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='月份：' prop='rptPeroid'>
							<div v-if="mode === 'view'">{{dataToView.rptPeroid.substr(0,7)}}</div>
							<DatePicker v-else class="query-form-el" :editable='false' type="month" placeholder="请选择月份" v-model='dataToView.rptPeroid'></DatePicker>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='召开党组织研究环保安全问题（次）：' prop='partyMeeting'>
							<div v-if="mode === 'view'">{{dataToView.partyMeeting}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.partyMeeting'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='召开公司安委会（次）：' prop='companyMeeting'>
							<div v-if="mode === 'view'">{{dataToView.companyMeeting}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.companyMeeting'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='环保公司例会（次）：' prop='enRegularMeeting'>
							<div v-if="mode === 'view'">{{dataToView.enRegularMeeting}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.enRegularMeeting'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='安全公司例会（次）：' prop='saRegularMeeting'>
							<div v-if="mode === 'view'">{{dataToView.saRegularMeeting}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.saRegularMeeting'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='开展公司环保检查（次）：' prop='enInspect	'>
							<div v-if="mode === 'view'">{{dataToView.enInspect}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.enInspect'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='开展公司安全检查（次）：' prop='saInspect	'>
							<div v-if="mode === 'view'">{{dataToView.saInspect}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.saInspect'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='发现环保问题及隐患（项）：' prop='enRisk'>
							<div v-if="mode === 'view'">{{dataToView.enRisk}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.enRisk'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='发现安全问题及隐患（项）：' prop='saRisk'>
							<div v-if="mode === 'view'">{{dataToView.saRisk}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.saRisk'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='环保问题整改情况：' prop='enResolve'>
							<div v-if="mode === 'view'">{{dataToView.enResolve}}</div>
							<InputNumber v-else class="query-form-el" v-model='dataToView.enResolve'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='安全问题整改情况：' prop='saResolve'>
							<div v-if="mode === 'view'">{{dataToView.saResolve}}</div>
							<InputNumber v-else class="query-form-el" v-model='dataToView.saResolve'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='开展公司层面环保培训（人·次）' prop='enTrain'>
							<div v-if="mode === 'view'">{{dataToView.enTrain}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.enTrain'></InputNumber>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='开展公司层面安全培训（人·次）' prop='saTrain'>
							<div v-if="mode === 'view'">{{dataToView.saTrain}}</div>
							<InputNumber v-else class="query-form-el" type='text' v-model='dataToView.saTrain'></InputNumber>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="11">
						<FormItem label='填表人：' prop='registrant'>
							<div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
							<Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
						</FormItem>
						</Col>
						<Col span="11">
						<FormItem label='填表时间：' prop='registTime'>
							<div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
							<DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.registTime'
							 readonly></DatePicker>
						</FormItem>
						</Col>
					</Row>
					<Row type="flex" justify="space-around" class="code-row-bg">
						<Col span="23">
						<FormItem label='备注：' prop='notes'>
							<div v-if="mode === 'view'">{{dataToView.notes}}</div>
							<Input v-else class="query-form-el" type='textarea' v-model='dataToView.notes'></Input>
						</FormItem>
						</Col>
					</Row>
				</Form>
				</Col>
			</Row>
			<div slot="footer">
				<Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
				<Button v-if="mode !== 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定
				</Button>
				<Button v-if="mode !== 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
			</div>

		</Modal>
	</Layout>
</template>

<script>
	import {
		Api
	} from '@/api/index.js'
	import _deepclone from 'lodash/cloneDeep'
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	var cascaderDom = () => import('@/components/cascader-dom.vue');
	import pageCommonFunction from '@/components/pageCommonFunction.js'
	export default {
		components: {
			cascaderDom
		},
		computed: {
			...mapState('trhg', {
				areaMap: state => state.area.areaMap ? state.area.areaMap : [],
                areaTreeMap: state => state.area.areaTreeMap?state.area.areaTreeMap:{},
			}),
		},
		data() {
			return {
				...this.createCommonDataField(),
				columns1: [{
						title: '序号',
						width: 80,
						fixed: 'left',
						align: 'center',
						render: (h, params) => {
							if (params.row.id === '-1') return h('span', "汇总");
							return h('span', (params.index - 1) + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
						}
					},
					// { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100 },
					{
						key: 'companyName',
						title: '企业名称',
						fixed: 'left',
						align: 'center',
						width: 260
					},
					{
						key: 'rptPeroid',
						fixed: 'left',
						title: '月份',
						align: 'center',
						width: 120,
						render: this.renderCellMonth
					},
					{
						key: 'companyAddress',
						title: '所在地',
						align: 'center',
						width: 130,
						render: this.renderCellArea
					},
					{
						key: 'partyMeeting',
						title: '召开党组织研究环保安全问题（次）',
						align: 'center',
						width: 160
					},
					{
						key: 'companyMeeting',
						title: '召开公司安委会（次）',
						align: 'center',
						width: 150
					},
					{
						title: '公司例会（次）',
						align: 'center',
						children: [{
								key: 'enRegularMeeting',
								title: '环保',
								align: 'center',
								width: 100
							},
							{
								key: 'saRegularMeeting',
								title: '安全',
								align: 'center',
								width: 100
							},
						]
					},
					{
						title: '开展公司环保安全检查（次）',
						align: 'center',
						children: [{
								key: 'enInspect',
								title: '环保',
								align: 'center',
								width: 100
							},
							{
								key: 'saInspect',
								title: '安全',
								align: 'center',
								width: 100
							},
						]
					},
					{
						title: '发现问题及隐患（项）',
						align: 'center',
						children: [

							{
								key: 'enRisk',
								title: '环保',
								align: 'center',
								width: 100
							},
							{
								key: 'saRisk',
								title: '安全',
								align: 'center',
								width: 100
							},
						]
					},
					{
						title: '问题整改情况',
						align: 'center',
						children: [{
								key: 'enResolve',
								title: '环保',
								align: 'center',
								width: 120
							},
							{
								key: 'saResolve',
								title: '安全',
								align: 'center',
								width: 120
							},
						]
					},
					{
						title: '开展公司层面环保安全培训（人·次）',
						align: 'center',
						children: [

							{
								key: 'enTrain',
								title: '环保',
								align: 'center',
								width: 120
							},
							{
								key: 'saTrain',
								title: '安全',
								align: 'center',
								width: 120
							},
						]
					},
					{
						key: 'notes',
						title: '备注',
						align: 'center',
						width: 200,
						tooltip: true
					},
					{
					    title: '操作',
					    key: 'action',
					    fixed: 'right',
					    width: 100,
					    align: 'center',
					    render: (h, params) => {
							if(params.index != 0){
								return h('div', [
								    h('A', {
								        props: {
								            type: 'primary',
								            size: 'small'
								        },
								        style: {
								            fontSize: '14px',
								        },
								        on: {
								            click: () => {
								                this.showData(params, 1);
								            }
								        }
								    }, '详情')
								]);
							}
					    }
					},
				],
				ruleCustom: {
					// perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
					companyId: [{
						required: true,
						message: '请填写企业名称',
						trigger: 'change'
					}],
					companyAddress: [{
						required: true,
						message: '请填写所在地',
						trigger: 'change'
					}],
					// partyMeeting: [ { required: true, message: '请填写召开党组织研究环保安全问题（次）', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// companyMeeting: [ { required: true, message: '请填写召开公司安委会（次）', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// enRegularMeeting: [ { required: true, message: '请填写环保公司例会次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// saRegularMeeting: [ { required: true, message: '请填写安全公司例会次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// enInspect	: [ { required: true, message: '请填写开展公司环保检查次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// saInspect	: [ { required: true, message: '请填写开展公司安全检查次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// enRisk: [ { required: true, message: '请填写发现环保问题及隐患数量', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '数量必须为数字', trigger: 'change'} ],
					// saRisk: [ { required: true, message: '请填写发现安全问题及隐患数量', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '数量必须为数字', trigger: 'change'} ],
					// enResolve: [ { required: true, message: '请填写环保问题整改情况', trigger: 'change' ,type:'number'} ,
					//     {pattern: /^(0|[1-9][0-9]*)$/,message: '数量必须为数字', trigger: 'change'} ],
					// saResolve: [ { required: true, message: '请填写安全问题整改情况', trigger: 'change',type:'number' } ,
					//     {pattern: /^(0|[1-9][0-9]*)$/,message: '数量必须为数字', trigger: 'change'} ],
					// enTrain: [ { required: true, message: '请填写开展公司层面环保培训次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// saTrain: [ { required: true, message: '请填写开展公司层面安全培训次数', trigger: 'change',type:'number' },
					//   {pattern: /^(0|[1-9][0-9]*)$/,message: '次数必须为数字', trigger: 'change'} ],
					// notes: [ { required: true, message: '请填写备注', trigger: 'change' } ],
					rptPeroid: [{
						required: true,
						message: '请填写月份',
						trigger: 'change',
						type: 'date'
					}],
				},
				tableHeight: 10,
				// api
				queryUrl: Api.querySafeRptCompanySaEnStatus,
				exportUrl: Api.exportSafeRptCompanySaEnStatus,
				deleteUrl: Api.deleteSafeRptCompanySaEnStatus,
				bthDeleteUrl: Api.batchDeleteSafeRptCompanySaEnStatus,
				getUrl: Api.getSafeRptCompanySaEnStatus,
				updateUrl: Api.updateSafeRptCompanySaEnStatus,
				saveUrl: Api.saveSafeRptCompanySaEnStatus,
			}
		},
		async mounted() {
			this.setTableHeight();
			this.pageStatus.baseLoading = true
			await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true})
			this.pageStatus.baseLoading = false
			this.query();
            this.tempAreaTree = this.areaTreeMap['0']
		},
		methods: {
			...pageCommonFunction,
			createEmptyDataToAdd() {
				return {
					partyMeeting: '',
					companyMeeting: '',
					enRegularMeeting: '',
					saRegularMeeting: '',
					enInspect: '',
					saInspect: '',
					enRisk: '',
					saRisk: '',
					enTrain: '',
					saTrain: '',
					enResolve: '',
					saResolve: '',
					companyAddressArr: []
				}
			},
            beforeEditDialogOpen(data) {
                // 字符转数字
                data.row.enResolve = Number(data.row.enResolve)
                data.row.saResolve = Number(data.row.saResolve)
                if(data.row.companyAddress){
                    data.row.companyAddressArr = data.row.companyAddress.split(',')
                    data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
                }
            },
            async afterDataToViewInit(data) {
                if (data && data.companyAddress) {
                    let companyAddressArr = data.companyAddress.split(',')
                    this.tempAreaTree = []
                    setTimeout(() => {
                        this.tempAreaTree = this.addressEditArr(this.areaTreeMap,companyAddressArr)
                    }, 100)
                }
            },
			rowClassName(row, index) {
				if (row.id === '-1') {
					return 'table-summary-row';
				}
			},
			deleteData(params) {
				this.deleteDateAjax(params);
			},
			query() {
				if (this.dataToQuery.yearDate) {
					this.dataToQuery.year = this.dataToQuery.yearDate.getFullYear();
				}
				if(this.dataToQuery.monthFrom == '-01'){
					this.dataToQuery.monthFrom = null
				}
				if(this.dataToQuery.monthTo == '-01'){
					this.dataToQuery.monthTo = null
				}
				this.queryAjax();
			},
			submit(name) {
				this.$set(this.dataToView, 'companyAddress', this.dataToView.companyAddressArr.join(','))
				if (this.dataToView.partyMeeting == '') {
					this.dataToView.partyMeeting = 0;
				}
				if (this.dataToView.companyMeeting == '') {
					this.dataToView.companyMeeting = 0;
				}
				if (this.dataToView.enRegularMeeting == '') {
					this.dataToView.enRegularMeeting = 0;
				}
				if (this.dataToView.saRegularMeeting == '') {
					this.dataToView.saRegularMeeting = 0;
				}
				if (this.dataToView.enInspect == '') {
					this.dataToView.enInspect = 0;
				}
				if (this.dataToView.saInspect == '') {
					this.dataToView.saInspect = 0;
				}
				if (this.dataToView.enRisk == '') {
					this.dataToView.enRisk = 0;
				}
				if (this.dataToView.saRisk == '') {
					this.dataToView.saRisk = 0;
				}
				if (this.dataToView.enTrain == '') {
					this.dataToView.enTrain = 0;
				}
				if (this.dataToView.saTrain == '') {
					this.dataToView.saTrain = 0;
				}
				if (this.dataToView.enResolve == '') {
					this.dataToView.enResolve = 0;
				}
				if (this.dataToView.saResolve == '') {
					this.dataToView.saResolve = 0;
				}
				this.submitAjax(name);
			},
			showData(data, flag) {
				this.dataToView = JSON.parse(JSON.stringify(data.row));
			    this.dialogShow = true; 
			},
		},
		watch: {},

	}
</script>

<style lang='css' scoped>
	.rpt-form {}

	/deep/ .rpt-form .query-form-el {
		width: 100%;
	}
</style>
